<template>
  <div class="payment-result-container">
    <el-card v-if="loading" class="loading-card">
      <el-progress type="circle" :percentage="progress" :color="progressColor" />
      <p class="loading-text">{{ loadingText }}</p>
    </el-card>

    <el-card v-else class="result-card">
      <div v-if="success">
        <el-result
          icon="success"
          title="支付成功"
          :sub-title="`订单号: ${orderId}`"
        >
          <template #extra>
            <p class="amount">支付金额: ￥{{ amount }}</p>
            <el-button type="primary" @click="viewOrder">查看订单详情</el-button>
            <el-button @click="goHome">返回首页</el-button>
          </template>
        </el-result>
      </div>

      <div v-else>
        <el-result
          icon="error"
          title="支付失败"
          :sub-title="errorMessage || '支付过程中出现错误'"
        >
          <template #extra>
            <el-button type="primary" @click="retryPayment">重新支付</el-button>
            <el-button @click="goHome">返回首页</el-button>
          </template>
        </el-result>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const router = useRouter()

const loading = ref(true)
const success = ref(false)
const orderId = ref('')
const amount = ref(0)
const errorMessage = ref('')
const progress = ref(0)
const progressColor = ref('#409EFF')
const loadingText = ref('正在验证支付结果...')

// 检查支付状态
const checkPaymentStatus = async () => {
  try {
    const response = await axios.get('http://127.0.0.1:8000/orders/check-status/', {
      params: {
        order_id: route.query.out_trade_no
      }
    })

    if (response.data.status === 200) {
      if (response.data.data.status === '已生效') {
        success.value = true
        orderId.value = route.query.out_trade_no
        amount.value = route.query.total_amount
      } else {
        errorMessage.value = `支付状态: ${response.data.data.status}`
      }
    } else {
      errorMessage.value = response.data.msg
    }
  } catch (error) {
    console.error('支付验证失败:', error)
    errorMessage.value = '支付验证服务异常'
  } finally {
    loading.value = false
  }
}

// 模拟进度更新
const updateProgress = () => {
  const interval = setInterval(() => {
    if (progress.value < 90) {
      progress.value += 10
      loadingText.value = `正在验证支付结果...${progress.value}%`
    } else {
      clearInterval(interval)
    }
  }, 500)
}

// 查看订单详情
const viewOrder = () => {
  router.push({
    name: 'order-detail',
    params: { id: route.query.out_trade_no }
  })
}

// 重新支付
const retryPayment = () => {
  router.push({
    name: 'order-detail',
    params: { id: route.query.out_trade_no }
  })
}

// 返回首页
const goHome = () => {
  router.push('/')
}

onMounted(() => {
  updateProgress()
  setTimeout(() => {
    checkPaymentStatus()
  }, 3000)
})
</script>

<style scoped>
.payment-result-container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
}

.loading-card, .result-card {
  text-align: center;
  padding: 40px 20px;
}

.loading-text {
  margin-top: 20px;
  font-size: 16px;
}

.amount {
  font-size: 20px;
  color: #f56c6c;
  font-weight: bold;
  margin-bottom: 20px;
}
</style>